<template>
	<view class="con">
		<view class="box">
			<view class="box_left">头像</view>
			<button class="box_right" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image class="box_right_img" src="/static/user.png" mode="" v-if="!avatarUrl"></image>
				<image class="box_right_img" :src="avatarUrl" mode="" v-else></image>
				<image class="box_right_img_zw" src="/static/28.png" mode=""></image>
			</button>
		</view>
		<view class="box">
			<view class="box_left">昵称</view>
			<input class="box_right" type="nickname" placeholder="请输入昵称" v-model="name" />
		</view>
		<view class="box">
			<view class="box_left">手机</view>
			<button class="box_right" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
				<input type="text" placeholder="请输入手机号" disabled v-model="phone" />
			</button>
		</view>

		<view class="text">
			<image class="text_img" src="/static/59.png" mode="" v-if="status" @click="status = false"></image>
			<image class="text_img" src="/static/58.png" mode="" v-else @click="status = true"></image>
			阅读并同意
			<span class="span" @click="to_text(1)">《用户协议》</span>
			和
			<span class="span" @click="to_text(2)">《隐私协议》</span>
		</view>
		<view class="btn">
			<view class="btn_nr" @click="submit">{{ type == 1 ? '确定登录' : '确定修改' }}</view>
		</view>
	</view>
</template>

<script setup>
	const http = inject('$http')
	const validateFields = inject('$validateFields')
	let avatarUrl = ref(null)
	let name = ref('')
	let phone = ref('')
	let status = ref(false)
	let type = ref(1)

	const submit = () => {
		if (
			validateFields([
				{
					value: avatarUrl.value,
					message: '请上传头像'
				},
				{
					value: name.value,
					message: '请输入昵称'
				},
				{
					value: phone.value,
					message: '请授权手机号'
				},
				{
					value: status.value,
					message: '阅读并同意用户协议隐私协议'
				}
			])
		)
			return

		http
			.noAuthpost('/srapi/wode/bjwode', {
				openid: uni.getStorageSync('openid'),
				nickname: name.value,
				avatar: avatarUrl.value,
				phone: phone.value
			})
			.then((res) => {
				console.log(res)
				wx.setStorageSync('phone', phone.value)
				wx.setStorageSync('type', res.type)
				wx.setStorageSync('uid', res.uid)
				// 返回值
				uni.showToast({
					title: res.msg,
					icon: 'success',
					mask: true,
					duration: 500
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 500)
			})
	}

	const onChooseAvatar = (file) => {
		console.log('file', file)
		http.upload(file.detail.avatarUrl).then((res) => {
			console.log('res', res)
			avatarUrl.value = res.file_path
		})
	}

	const getPhoneNumber = (e) => {
		console.log(e.detail)
		let code = e.detail.code
		http.noAuthpost('/srapi/get/decryptData', { code: code }).then((res) => {
			console.log('手机号', res)
			phone.value = res.tel
			// phone.value = 13100000000

			uni.showToast({
				title: '授权成功',
				icon: 'success',
				mask: true,
				duration: 500
			})
		})
	}
	onLoad((option) => {
		console.log('接收传参:', option)
		type.value = +option.type

		switch (type.value) {
			case 1:
				uni.setNavigationBarTitle({
					title: '授权登录'
				})
				break
			case 2:
				uni.setNavigationBarTitle({
					title: '修改信息'
				})
				break
			default:
				break
		}

		let is_phone = uni.getStorageSync('phone') || ''
		if (!is_phone) {
			return
		}
		http.post('/srapi/wode/wode').then((res) => {
			// 返回值
			console.log(res.data)
			name.value = res.data.nickname
			avatarUrl.value = res.data.avatar
			phone.value = res.data.phone
		})
	})

	const to_text = (id) => {
		uni.navigateTo({
			url: '/pages_A/text/text?type=' + id
		})
	}
</script>

<style lang="less" scoped>
	.con {
		padding: 30rpx;
	}
	.box {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 18rpx;
		.box_left {
			font-size: 28rpx;
			font-weight: 500;
			color: #000000;
		}

		.box_right {
			flex: 1;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			text-align: right;
			font-size: 28rpx;
			font-weight: 500;

			color: #000000;
			.box_right_img {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
			}
			.box_right_img_zw {
				width: 9rpx;
				height: 16rpx;
				margin-left: 25rpx;
			}
		}
	}

	.text {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		font-weight: 500;
		color: #000000;
		margin-top: 50rpx;
		.text_img {
			width: 32rpx;
			height: 32rpx;
			margin-right: 20rpx;
		}
		.span {
			color: #054f74;
		}
	}

	.btn {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #fff;
		border-radius: 12rpx;
		padding: 15rpx 30rpx;
		padding-bottom: calc(15rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(15rpx + env(safe-area-inset-bottom));
		.btn_nr {
			width: 690rpx;
			height: 84rpx;
			background: #209ce4;
			border-radius: 12rpx;
			font-size: 32rpx;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			line-height: 84rpx;
		}
	}

	.popup_box {
		margin-top: -200rpx;
		width: 560rpx;
		background: #ffffff;
		border-radius: 32rpx;
		position: relative;
		z-index: 3;
		padding: 30rpx;
		.popup_box_img {
			position: absolute;
			left: 0;
			top: 0;
			width: 620rpx;
			height: 200rpx;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
		}
		.popup_box_zw {
			position: absolute;
			z-index: 3;
			width: 24rpx;
			height: 24rpx;
			top: 30rpx;
			right: 30rpx;
		}
		.popup_box_title {
			position: relative;
			z-index: 3;
			font-size: 32rpx;
			font-weight: 700;
			color: #000000;
			text-align: center;
			margin-bottom: 50rpx;
		}

		.popup_box_nr {
			position: relative;
			z-index: 3;
			max-height: 311rpx;
			overflow-y: auto;
			font-size: 24rpx;
			line-height: 48rpx;
			font-weight: 500;
			color: #383838;
			margin-bottom: 50rpx;
		}
		.popup_box_btn {
			position: relative;
			z-index: 3;
			width: 260rpx;
			height: 84rpx;
			background: #054f74;
			border-radius: 42rpx;
			font-size: 30rpx;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			line-height: 84rpx;
			margin: 0 auto;
		}
	}

	//
</style>
